<template>
  <div id="citySelect">
    <div class="cityIndexBar">
      <div class="city_inner">
        <div class="ding_wei">
          <div class="ding_title">定位/最近访问</div>
          <div class="ding_content">{{city_name}}</div>
        </div>
        <div class="hot_city">
          <div class="ding_title">热门城市</div>
          <div class="ding_content_wrap">
            <div
              class="ding_content"
              @click="goIndex(hot)"
              v-for="(hot,idx1) in hotCity.init_hot_city_cn"
              :key="idx1"
            >{{hot.name}}</div>
          </div>
        </div>
        <!--</div>-->
        <van-index-bar
          v-if="cityList.length"
          :index-list="cityIndex"
          :scroll-top="scrollTop"
          highlight-color="#000000"
          :sticky="false"
          @select="select"
          class="hot_inner"
        >
          <view v-for="(item,idx) in cityIndex" :key="idx">
            <van-index-anchor :index="item" />
            <view v-for="(city,index) in cityList" :key="index">
              <van-cell v-if="item===city.py" :title="city.name" @click="goIndex(city)" />
            </view>
          </view>
        </van-index-bar>
      </div>
    </div>
  </div>
</template>
<script>
import getUserInfo from "../../utils/getUserInfo";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";
import amapFile from "../../libs/amap-wx.js";
// 开发者的appId和密钥，密钥动态生成
const appId = "";
//  const appId = 'wx50d4acb21d3ab753'
const appKey = "";

export default {
  data() {
    return {
      scrollTop: 0,
      // A-Z 索引
      cityIndex: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      cityList: [],
      hotCity: [],
      indexArr: [],
      userInfo: {},
      isLogin: false,
      openid: "",
      city_name: "北京",
      markersData: {
        latitude: "", //纬度
        longitude: "", //经度
        key: "75e1746209cb988fb0fba67f6662e985" //申请的高德地图key（申请的web key）
      },
      gpsCode: "",
      time: null
    };
  },
  onLoad() {
    if (wx.getStorageSync("cityObj").name) {
      this.city_name = wx.getStorageSync("cityObj").name;
    } else {
      this.loadCity();
    }
  },
  mounted() {
    this.fnCityList();
    this.fnHotCity();
  },
  methods: {
    select(e) {
      clearTimeout(this.time);
      if (e.target["0"] === "热")
        this.time = setTimeout(() => {
          wx.pageScrollTo({
            scrollTop: 0
          });
          return;
        }, 300);
    },
    //定位城市
    gpsCity() {
      var that = this;
      //调用自带位置获取
      wx.getLocation({
        type: "gcj02", //返回可以用于wx.openLocation的经纬度
        success: function(res) {
          var longitude = res.longitude; //经度
          var latitude = res.latitude; //维度
          that.loadCity(longitude, latitude); //调用高德
          that.lnglat = longitude + "," + latitude;
        }
      });
    },
    //把当前位置的经纬度传给高德地图，调用高德API获取当前地理位置，天气情况等信
    loadCity() {
      var that = this;
      var myAmapFun = new amapFile.AMapWX({ key: that.markersData.key });
      myAmapFun.getRegeo({
        location: wx.getStorageSync("lnglat"),
        success: function(data) {
          var cityCode =
            data[0].regeocodeData.addressComponent.adcode.substring(0, 2) +
            "0000";
          that.gpsCode = cityCode;
          that.city_name = data[0].regeocodeData.addressComponent.province;
        },
        fail: function(info) {}
      });
    },
    goIndex(option) {
      wx.setStorageSync("cityObj", option);
      // 更新经纬度信息
      wx.setStorageSync("lnglat", option.lng + "," + option.lat);
      wx.reLaunch({
        url: "/pages/books/main"
      });
    },
    // 获取城市列
    fnCityList() {
      this.$http
        .post({
          url: "/mobile/api/client/hot-city",
          data: {}
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.hotCity = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    },
    // 获取热门城市
    fnHotCity() {
      this.$http
        .post({
          url: "/mobile/api/client/city-list",
          data: {}
        })
        .then(res => {
          if (res.code == "RX0000") {
            this.cityList = res.data;
          } else {
            wx.showToast({
              title: res.data
            });
          }
        });
    }
  }
};
</script>
<style lang="less">
#citySelect {
  width: 100%;
  .van-index-anchor {
    background-color: #f9f9f9;
  }
  /*右侧字母列表*/
  .van-index-bar__sidebar {
    right: 5px;
  }
  .cityIndexBar {
    .city_inner {
      width: 100%;
      background: #f9f9f9;
      position: absolute !important;
      .ding_wei {
        box-sizing: border-box;
        padding: 0 10px;

        .ding_title {
          width: 100%;
          height: 35px;
          line-height: 35px;
          font-size: 14px;
          color: #999;
          text-align: left;
        }
        .ding_content {
          /*width: 75px;*/
          height: 30px;
          line-height: 30px;
          font-size: 13px;
          color: #333;
          text-align: center;
          background: #fff;
          width: 28%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .hot_city {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
        overflow: hidden;
        .ding_title {
          width: 100%;
          height: 30px;
          line-height: 35px;
          font-size: 14px;
          color: #999;
          text-align: left;
        }
        .ding_content_wrap {
          width: 100%;
          .ding_content:nth-child(3n-2) {
            margin-left: 0px;
          }
          .ding_content {
            margin-left: 15px;
            margin-top: 10px;
            float: left;
            width: 28%;
            /*width: 75px;*/
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            color: #333;
            text-align: center;
            background: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      /*.hot_wrap{*/
      .hot_inner {
        .hot_list {
          width: 100%;
          .title_a {
            height: 25px;
            line-height: 25px;
            font-size: 12.5px;
            color: #999;
            text-align: left;
            background: #f9f9f9;
            /*background: #000;*/
          }
          .content_wrap {
            background: #fff;
            margin-right: 10px;
            box-sizing: border-box;
            .city_item {
              height: 45px;
              line-height: 45px;
              font-size: 16.5px;
              color: #333;
              text-align: left;
              border-bottom: 1px solid #eeeeee;
            }
          }
        }
      }
    }
  }
}
</style>

